<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="状态"
          clearable
          style="width: 240px"
        >
          <el-option label="归库" value="0" />
          <el-option label="使用中" value="1" />
          <el-option label="维修中" value="2" />
          <el-option label="报废" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门" prop="department">
        <el-input
          v-model="queryParams.department"
          placeholder="请输入部门"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="人员" prop="personnel">
        <el-input
          v-model="queryParams.personnel"
          placeholder="请输入人员"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备编号" prop="deviceCode">
        <el-input
          v-model="queryParams.deviceCode"
          placeholder="请输入设备编号"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="noticeList">
      <el-table-column
        label="设备名称"
        align="center"
        prop="deviceName"
        width="100"
      />
      <el-table-column
        label="设备唯一编号"
        align="center"
        prop="deviceCode"
        width="160"
      />
      <el-table-column
        label="PAD型号"
        align="center"
        prop="padModel"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="PAD品牌"
        align="center"
        prop="padBrand"
        width="100"
      />
      <el-table-column
        label="部门"
        align="center"
        prop="department"
        width="100"
      />
      <el-table-column
        label="人员"
        align="center"
        prop="personnel"
        width="100"
      />
      <el-table-column label="状态" align="center" prop="status" width="100">
        <template #default="scope">
          {{ ["归库", "使用中", "维修中", "报废"][scope.row.status] }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        width="140"
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-tooltip content="查看" placement="top">
            <el-button
              link
              type="primary"
              icon="View"
              @click="handleDetail(scope.row)"
              v-hasPermi="['system:notice:edit']"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="调拨" placement="top">
            <el-button
              link
              type="primary"
              icon="guide"
              @click="handleExchange(scope.row)"
              v-hasPermi="['system:notice:remove']"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="状态变更" placement="top">
            <el-button
              link
              type="primary"
              icon="edit"
              @click="handleStatus(scope.row)"
              v-hasPermi="['system:notice:remove']"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column> -->
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageSize"
      v-model:limit="queryParams.pageCount"
      @pagination="getList"
    />
      </el-col>
      <el-col :span="12">

      </el-col>
    </el-row>
   

    <!-- 添加 -->
    <el-dialog :title="title" v-model="open" width="560px">
      <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input disabled v-model="form.deviceName" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="PAD型号" prop="padModel">
              <el-input disabled v-model="form.padModel" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="PAD品牌" prop="padBrand">
              <el-input disabled v-model="form.padBrand" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属部门" prop="departmentId">
              <el-tree-select
                style="width: 100%"
                v-model="form.departmentId"
                :data="organizationTreeList"
                :render-after-expand="false"
                value-key="id"
                :props="{
                  label: 'orgName',
                  children: 'childs',
                }"
                @node-click="changeDepartment"
                v-if="title == '调拨'"
              />
              <el-input disabled v-model="form.department" v-else />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="人员" prop="userId">
              <el-select
                v-model="form.userId"
                placeholder="人员"
                clearable
                v-if="title == '调拨'"
              >
                <el-option
                  :label="item.real_name"
                  :value="item.id"
                  v-for="item in userList"
                  :key="item.id"
                  @click="changeUser(item)"
                />
              </el-select>
              <el-input disabled v-model="form.personnel" v-else />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" placeholder="状态" clearable>
                <el-option label="归库" value="0" />
                <el-option label="使用中" value="1" />
                <el-option label="维修中" value="2" />
                <el-option label="报废" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog
      title="查看设备"
      class="scrollbar"
      v-model="detailVisible"
      width="560px"
      append-to-body
    >
      <div class="dialog-content">
        <el-form>
          <el-row>
            <el-col :span="12">
              <el-form-item label="设备名称">
                {{ form.deviceName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="PAD品牌"> {{ form.padBrand }} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门"> {{ form.department }} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="PAD型号"> {{ form.padModel }} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="人员"> {{ form.personnel }} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                {{ ["归库", "使用中", "维修中", "报废"][form.status] }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="WebMessage">
import {
  list,
  add,
  getUser,
  getOrganization,
  changeStatus,
} from "@/api/device/pad";

const { proxy } = getCurrentInstance();
const noticeList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const total = ref(0);
const title = ref("");
const detailVisible = ref(false);
const organizationTreeList = ref([]);
const userList = ref([]);

const data = reactive({
  form: {},
  queryParams: {
    pageCount: 10,
    pageSize: 1,
    status: "",
    department: "",
    personnel: "",
    deviceCode: "",
  },
  rules: {
    orgIds: [{ required: true, message: "发送对象不能为空", trigger: "blur" }],
    title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
    content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
  },
});

const { queryParams, form, rules } = toRefs(data);

// 统计发送对象数量
watch(
  () => data.form.orgIds,
  (newValue, oldValue) => {
    console.log(newValue);
    data.form.receNum = newValue.length;
  }
);
/** 查询消息列表 */
function getList() {
  loading.value = true;
  list(queryParams.value).then((response) => {
    noticeList.value = response.data.records;
    total.value = response.data.total;
    loading.value = false;
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
/** 表单重置 */
function reset() {
  proxy.resetForm("noticeRef");
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageSize = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 修改所属部门
function changeDepartment(value) {
  form.value.department = value.orgName;
  getUser(value.orgId).then((res) => {
    form.value.userId = "";
    form.value.personnel = "";
    userList.value = res;
  });
}
// 修改人员
function changeUser(value) {
  form.value.personnel = value ? value.real_name : "";
}

/** 调拨操作 */
function handleExchange(row) {
  const ids = row.id;
  // 判断状态
  if (row.status == 1) {
    proxy.$modal
      .confirm("该设备正在使用中，是否确认调拨？？")
      .then(function () {
        reset();
        getOrganization().then((res) => {
          organizationTreeList.value = res;
          form.value = Object.assign({}, row);
          open.value = true;
          title.value = "调拨";
        });
      });
  } else {
    getOrganization().then((res) => {
      organizationTreeList.value = res;
      form.value = Object.assign({}, row);
      open.value = true;
      title.value = "调拨";
    });
    if (row.orgId) {
      getUser(row.orgId).then((res) => {
        userList.value = res;
      });
    }
  }
}

/** 状态变更操作 */
function handleStatus(row) {
  const ids = row.id;
  form.value = Object.assign({}, row);
  // 判断状态
  open.value = true;
  title.value = "状态变更";
}
/**详情 */
function handleDetail(row) {
  form.value = row;
  detailVisible.value = true;
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["noticeRef"].validate((valid) => {
    if (valid) {
      if (title.value == "调拨") {
        add(form.value).then((response) => {
          proxy.$modal.msgSuccess(title.value + "成功");
          open.value = false;
          getList();
        });
      } else {
        changeStatus(form.value).then((response) => {
          proxy.$modal.msgSuccess(title.value + "成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
getList();
</script>
